<template>
  <div class="box">
    <div class="tab-tit">
      <div @click="msg=0" :class="{'cur':msg===0}">全部类别</div>
      <div @click="msg=1" :class="{'cur':msg===1}">电梯查验</div>
      <div @click="msg=2" :class="{'cur':msg===2}">消防查验</div>
      <div @click="msg=3" :class="{'cur':msg===3}">绿化查验</div>
      <div @click="msg=4" :class="{'cur':msg===4}">智能化中控</div>
      <div @click="msg=5" :class="{'cur':msg===5}">排水系统</div>
      <div @click="msg=6" :class="{'cur':msg===6}">配电系统</div>
      <div @click="msg=7" :class="{'cur':msg===7}">公共设施</div>
      <div @click="msg=8" :class="{'cur':msg===8}">公共部分</div>
    </div>
    <div class="tab-con" ref="scroll">
      <div class="div_all">
        <scroll v-show="msg===0">
          <ul>
            <li v-for="n in 30">活塞的好事啊就是看地方哈佛佳世达富士康滑动看</li>
          </ul>
        </scroll>
        <div v-show="msg===1">
          电梯查验
        </div>
        <div v-show="msg===2">
          消防查验
        </div>
        <div v-show="msg===3">
          绿化查验
        </div>
        <div v-show="msg===4">
          智能化中控
        </div>
        <div v-show="msg===5">
          排水系统
        </div>
        <div v-show="msg===6">
          配电系统
        </div>
        <div v-show="msg===7">
          公共设施
        </div>
        <div v-show="msg===8">
          公共部分
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .box {
    width: 100%;
    padding-top: 40px;
    display: inline-flex;
    justify-content: space-between;
  }

  .tab-tit {
    width: 20%;
    display: inline-block;
  }

  .tab-tit div {
    line-height: 50px;
    width: 100%;
    height: 50px;
    font-size: 15px;
    text-align: center;
    background: #f2f2f2;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #939393;
    border-right: 1px solid #939393;
  }

  .tab-tit div:last-child {
    border-bottom: none;
  }

  .tab-tit .cur {
    background: #09f;
    color: #fff;
  }

  .tab-con {
    width: 80%;
    .div_all{
      width: 100%;
      div{
        ul{
          li{
            width: 100%;
            height: 30px;
            border-bottom: 1px solid saddlebrown;
            line-height: 30px;
          }
        }
      }
    }
  }
</style>
<script>
  import Scroll from '../common/scroll'

  export default {
    name: 'Me3',
    data() {
      return {
        msg: 0
      }
    },
    methods: {},
    components: {
      Scroll
    }
  }
</script>
